<template>
  <!-- 判断goods对象是否为空 -->
  <div v-if="Object.keys(goodsItem).length !== 0 " class="base-info">
    <div class="info-title">{{goodsItem.title}}</div>
    <div class="info-price">
      <span class="n-price">{{goodsItem.newPrice}}</span>
      <span class="o-price">{{goodsItem.oldPrice}}</span>
      <span v-if="goodsItem.discount" class="discount">{{goodsItem.discount}}</span>
    </div>
    <div class="columns">
      <span v-for="(item,index) in goodsItem.columns.length-1" :key="index">{{goodsItem.columns[item-1]}}</span>
      <span>{{goodsItem.services[0].name}}</span>
    </div>
    <div class="service">
      <span v-for="(item,index) in goodsItem.services.length-1" :key="index">
        <img :src="goodsItem.services[item].icon" alt />
        {{goodsItem.services[item].name}}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailBaseInfo',
  props:{
    goodsItem:{
      type:Object,
      default(){
        return {}
      }
    }
  }
}
</script>

<style>
  .base-info{
    margin-top: 15px;
    padding: 0 8px;
    color: #999;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-title{
    color: #222;
  }

  .info-price{
    margin-top: 10px;
  }

  .info-price .n-price{
    font-size: 24px;
    color: var(--color-high-text)
  }

  .info-price .o-price{
    font-size: 13px;
    margin-left: 5px;
    text-decoration: line-through;
  }

  .discount{
    background:var(--color-high-text);
    color: #f2f5f8;
    border-radius: 40px;
    font-size: 12px;
    text-align: center;
    padding: 2px 2px;
    margin-left: 5px;
  }

  .columns {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}

  .service {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 15px 0;
    /* font-size: 14px;
    border-bottom: 4px solid #f6f6f6; */
    color: #333;
  }
  .service img {
    width: 11px;
    height: 11px;
  }
</style>